<template>
  <view class="forum-page">
    <!-- 顶部搜索栏 -->
    <view class="search-header">
      <view class="search-bar">
        <uni-icons type="search" size="18" color="#999"/>
        <input 
          class="search-input" 
          placeholder="搜索帖子、用户或话题" 
          v-model="searchText"
          @confirm="handleSearch"
        />
        <uni-icons 
          v-if="searchText" 
          type="clear" 
          size="18" 
          color="#999" 
          @click="clearSearch"
        />
      </view>
    </view>

    <!-- 分类标签 -->
    <view class="category-tabs">
      <scroll-view scroll-x class="tabs-scroll" :show-scrollbar="false">
        <view class="tabs-container">
          <view 
            v-for="(tab, index) in categories" 
            :key="index"
            class="tab-item"
            :class="{ active: activeTab === index }"
            @click="switchTab(index)"
          >
            <text class="tab-text">{{ tab.name }}</text>
            <view v-if="activeTab === index" class="tab-indicator"></view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 帖子列表 -->
    <scroll-view 
      scroll-y 
      class="posts-container" 
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="posts-list">
        <view 
          v-for="(post, index) in posts" 
          :key="post.id"
          class="post-card"
          @click="goToPostDetail(post)"
        >
          <!-- 用户信息 -->
          <view class="post-header">
            <view class="user-info">
              <image class="user-avatar" :src="post.avatar" mode="aspectFill" @click.stop="goToUser(post)" />
              <view class="user-details">
                <text class="username" @click.stop="goToUser(post)">{{ post.username }}</text>
                <text class="post-time">{{ post.time }}</text>
              </view>
            </view>
            <view class="post-category" :class="getCategoryClass(post.category)" @click.stop="goToCategory(post.category)">
              {{ post.category }}
            </view>
          </view>

          <!-- 帖子内容 -->
          <view class="post-content">
            <text class="post-title">{{ post.title }}</text>
            <text class="post-summary">{{ post.summary }}</text>
            <view v-if="post.images && post.images.length > 0" class="post-images">
              <image 
                v-for="(img, imgIndex) in post.images.slice(0, 3)" 
                :key="imgIndex"
                class="post-image" 
                :src="img" 
                mode="aspectFill"
                @click.stop="previewImage(post.images, imgIndex)"
              />
              <view v-if="post.images.length > 3" class="image-count">
                +{{ post.images.length - 3 }}
              </view>
            </view>
            <view v-if="post.tags && post.tags.length" class="post-tags">
              <view v-for="tag in post.tags" :key="tag" class="post-tag">{{ tag }}</view>
            </view>
          </view>

          <!-- 帖子统计 -->
          <view class="post-stats">
            <view class="stat-item">
              <uni-icons type="eye" size="16" color="#999"/>
              <text class="stat-text">{{ post.views }}</text>
            </view>
            <view class="stat-item">
              <uni-icons type="chatbubble" size="16" color="#999"/>
              <text class="stat-text">{{ post.comments }}</text>
            </view>
            <view class="stat-item" @click.stop="toggleLike(post)">
              <uni-icons 
                :type="post.isLiked ? 'heart-filled' : 'heart'" 
                size="16" 
                :color="post.isLiked ? '#ff4757' : '#999'"
              />
              <text class="stat-text" :class="{ liked: post.isLiked }">{{ post.likes }}</text>
            </view>
            <view class="stat-item" @click.stop="showShare">
              <uni-icons type="share" size="16" color="#999"/>
              <text class="stat-text">分享</text>
            </view>
          </view>
        </view>

        <!-- 加载更多 -->
        <view v-if="loading" class="loading-more">
          <uni-load-more status="loading" />
        </view>
      </view>
    </scroll-view>

    <!-- 发布按钮 -->
    <view class="fab-container">
      <view class="fab-button" @click="showPublishModal">
        <uni-icons type="plus" size="24" color="#fff"/>
      </view>
    </view>

    <!-- 发布模态框 -->
    <uni-popup ref="publishPopup" type="bottom" :mask-click="false">
      <view class="publish-modal custom-publish-modal">
        <view class="modal-header custom-modal-header">
          <text class="modal-title custom-modal-title">发布帖子</text>
          <uni-icons type="close" size="22" color="#999" @click="hidePublishModal"/>
        </view>
        <view class="modal-content custom-modal-content">
          <picker 
            mode="selector" 
            :range="categories" 
            range-key="name"
            @change="onCategoryChange"
          >
            <view class="category-picker custom-category-picker">
              <text class="picker-label custom-picker-label">选择分类</text>
              <text class="picker-value custom-picker-value">{{ selectedCategory || '请选择' }}</text>
              <uni-icons type="arrowdown" size="16" color="#bbb"/>
            </view>
          </picker>
          <view class="tag-picker custom-tag-picker">
            <text class="picker-label custom-picker-label">选择标签</text>
            <view class="tag-list custom-tag-list">
              <view 
                v-for="tag in allTags" 
                :key="tag"
                :class="['tag-item custom-tag-item', { selected: publishForm.tags.includes(tag) }]"
                @click="toggleTag(tag)"
              >{{ tag }}</view>
            </view>
          </view>
          <input 
            class="title-input custom-title-input" 
            placeholder="请输入标题" 
            v-model="publishForm.title"
            maxlength="50"
          />
          <textarea 
            class="content-input custom-content-input" 
            placeholder="分享你的面试经验..." 
            v-model="publishForm.content"
            maxlength="1000"
            auto-height
          />
          <view class="image-upload custom-image-upload">
            <scroll-view scroll-x class="custom-upload-scroll-view" show-scrollbar="false">
              <view class="custom-upload-list">
                <view 
                  v-for="(img, index) in publishForm.images" 
                  :key="index"
                  class="custom-upload-thumb"
                >
                  <image class="custom-upload-image-thumb" :src="img" mode="aspectFill"/>
                  <view class="custom-remove-btn-thumb" @click="removeImage(index)">
                    <uni-icons type="close" size="12" color="#fff"/>
                  </view>
                </view>
                <view 
                  v-if="publishForm.images.length < 9" 
                  class="custom-upload-btn-thumb"
                  @click="chooseImage"
                >
                  <uni-icons type="camera" size="22" color="#bbb"/>
                  <text class="custom-upload-text-thumb">添加</text>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
        <view class="modal-footer custom-modal-footer">
          <button class="publish-btn custom-publish-btn" @click="publishPost">发布</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { ForumCategory, ForumPost, PublishForm } from '@/types/forum'
import { getForumPostsAPI, publishForumPostAPI } from '@/service/forum'
import { BaseRequestUrl } from '@/utils/properties'

// 搜索相关
const searchText = ref('')

// 分类标签
const categories: ForumCategory[] = [
  { name: '全部', value: 'all' },
  { name: '面试经验', value: 'experience' },
  { name: '技术分享', value: 'tech' },
  { name: '求职心得', value: 'job' },
  { name: '学习交流', value: 'study' },
  { name: '职场感悟', value: 'career' },
  { name: '面试技巧', value: 'skills' }
]
const activeTab = ref(0)

// 帖子数据
const posts = ref<ForumPost[]>([
  {
    id: 1,
    username: '面试达人',
    avatar: '/src/static/user-avatar.png',
    time: '2小时前',
    category: '面试经验',
    title: '字节跳动前端面试经验分享',
    summary: '刚刚通过了字节跳动的前端面试，分享一下面试流程和注意事项，希望对大家有帮助...',
    images: ['/src/static/user-avatar.png', '/src/static/user-avatar.png'],
    views: 1234,
    comments: 56,
    likes: 89,
    isLiked: false,
    tags: ['前端', '面经', '字节跳动']
  },
  {
    id: 2,
    username: '技术小白',
    avatar: '/src/static/user-avatar.png',
    time: '5小时前',
    category: '技术分享',
    title: 'React Hooks 最佳实践总结',
    summary: '在使用React Hooks的过程中总结了一些最佳实践，包括性能优化、状态管理等方面...',
    images: [],
    views: 856,
    comments: 23,
    likes: 45,
    isLiked: true,
    tags: ['前端', 'React', 'Hooks']
  },
  {
    id: 3,
    username: '求职者小王',
    avatar: '/src/static/user-avatar.png',
    time: '1天前',
    category: '求职心得',
    title: '从0到1的求职之路',
    summary: '记录一下我的求职历程，从准备简历到最终拿到offer，希望能给同样在求职的朋友一些启发...',
    images: ['/src/static/user-avatar.png'],
    views: 2341,
    comments: 78,
    likes: 156,
    isLiked: false,
    tags: ['求职', '心得', '面经']
  }
])
// 分页相关
const pageNum = ref(1)
const pageSize = 10
const hasMore = ref(true)

// 加载状态
const loading = ref(false)
const refreshing = ref(false)

// 发布相关
const publishPopup = ref()
const selectedCategory = ref('')
const publishForm = reactive<PublishForm>({
  title: '',
  content: '',
  images: [],
  tags: [],
  category: ''
})

// 新增：标签列表
const allTags = ['前端', '后端', '算法', '校招', '实习', '面经', '八股', '项目', '大厂']



const clearSearch = () => {
  searchText.value = ''
}


const getCategoryClass = (category: string) => {
  const classMap: Record<string, string> = {
    '面试经验': 'category-experience',
    '技术分享': 'category-tech',
    '求职心得': 'category-job',
    '学习交流': 'category-study',
    '职场感悟': 'category-career',
    '面试技巧': 'category-skills'
  }
  return classMap[category] || 'category-default'
}

const goToPostDetail = (post: ForumPost) => {
  uni.navigateTo({ url: `../../pagesForum/forumDetail/forumDetail?id=${post.id}` })
}

const goToUser = (user: any) => {
  if (user.username === '我') {
    uni.showToast({ title: '这是你自己', icon: 'none' })
  } else {
    uni.showToast({ title: `跳转到${user.username}主页`, icon: 'none' })
    // uni.navigateTo({ url: `/pages/user/profile?uid=${user.id}` })
  }
}

const goToCategory = (category: string) => {
  uni.showToast({ title: `跳转到${category}分类`, icon: 'none' })
  // uni.navigateTo({ url: `/pages/forum/category?cat=${category}` })
}

const showShare = () => {
  if (uni.showShareMenu) {
    uni.showShareMenu()
  } else {
    uni.showToast({ title: '分享功能待接入', icon: 'none' })
  }
}

const previewImage = (images: string[], index: number) => {
  uni.previewImage({
    current: index,
    urls: images
  })
}

const toggleLike = (post: ForumPost) => {
  post.isLiked = !post.isLiked
  post.likes += post.isLiked ? 1 : -1
}

const loadPosts = async (reset = false) => {
  if (loading.value || (!hasMore.value && !reset)) return
  loading.value = true
  try {
    const params = {
      keyword: searchText.value,
      category: activeTab.value === 0 ? undefined : categories[activeTab.value].value,
      page: pageNum.value,
      pageSize
    }
    const res = await getForumPostsAPI(params)
    console.log(res)
    if (reset) {
      // 下拉刷新：覆盖原有数据（保留示例数据）
      posts.value = posts.value.slice(0, 3).concat(res.data || [])
    } else {
      // 触底加载：拼接新数据
      posts.value = posts.value.concat(res.data || [])
    }
    if (!res.data || res.data.length < pageSize) {
      hasMore.value = false
    } else {
      hasMore.value = true
    }
  } catch (e) {
    hasMore.value = false
  } finally {
    loading.value = false
  }
}

const switchTab = async (index: number) => {
  activeTab.value = index
  pageNum.value = 1
  hasMore.value = true
  await loadPosts(true)
  // 这里可以根据分类加载不同的帖子
}

const loadMore = async () => {
  if (loading.value || !hasMore.value) return
  pageNum.value += 1
  await loadPosts(false)
}

const onRefresh = async () => {
  refreshing.value = true
  pageNum.value = 1
  hasMore.value = true
  await loadPosts(true)
  refreshing.value = false
}


const showPublishModal = () => {
  publishPopup.value.open()
}

const hidePublishModal = () => {
  publishPopup.value.close()
}

const onCategoryChange = (e: any) => {
  const index = e.detail.value
  selectedCategory.value = categories[index].name
}

const toggleTag = (tag: string) => {
  const idx = publishForm.tags.indexOf(tag)
  if (idx > -1) {
    publishForm.tags.splice(idx, 1)
  } else if (publishForm.tags.length < 5) {
    publishForm.tags.push(tag)
  }
}

const chooseImage = () => {
  uni.chooseImage({
    count: 9 - publishForm.images.length,
    success: (res) => {
      publishForm.images.push(...res.tempFilePaths)
    }
  })
}

const removeImage = (index: number) => {
  publishForm.images.splice(index, 1)
}

const handleSearch = async () => {
  pageNum.value = 1
  hasMore.value = true
  await loadPosts(true)
}

const publishPost = async () => {
  if (!selectedCategory.value) {
    uni.showToast({ title: '请选择分类', icon: 'none' })
    return
  }
  if (publishForm.tags.length === 0) {
    uni.showToast({ title: '请选择标签', icon: 'none' })
    return
  }
  if (!publishForm.title.trim()) {
    uni.showToast({ title: '请输入标题', icon: 'none' })
    return
  }
  if (!publishForm.content.trim()) {
    uni.showToast({ title: '请输入内容', icon: 'none' })
    return
  }
  // 模拟发布
  uni.showLoading({ title: '发布中...' })
  try {
    //将图片文件上传到服务器，然后服务器返回图片URL,使用uni.uploadFile
    for (let i = 0; i < publishForm.images.length; i++) {
      const filePath = publishForm.images[i]
      uni.uploadFile({
        url: BaseRequestUrl + "/server-interview/image/uploadImage", // 替换为实际上传接口
        filePath,
        name: 'file',
        success: (res) => {
          publishForm.images[i] = res.data
        }
      })
    }
    
    publishForm.category = selectedCategory.value
    await publishForumPostAPI(publishForm)
    uni.hideLoading()
    uni.showToast({ title: '发布成功' })
    hidePublishModal()
    // 重置表单
    selectedCategory.value = ''
    publishForm.title = ''
    publishForm.content = ''
    publishForm.images = []
    publishForm.tags = []
    // 刷新帖子列表
    pageNum.value = 1
    hasMore.value = true
    await loadPosts(true)
  } catch (e) {
    uni.hideLoading()
    uni.showToast({ title: '发布失败', icon: 'none' })
  }
}

onMounted(() => {
  loadPosts(true)
})
</script>

<style scoped lang="scss">
@import '@/uni.scss';

.forum-page {
  background: $uni-bg-color-grey;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.search-header {
  background: #fff;
  padding: 20rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.search-bar {
  display: flex;
  align-items: center;
  background: $uni-bg-color-grey;
  border-radius: 24rpx;
  padding: 16rpx 24rpx;
  gap: 16rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: $uni-text-color;
}

.category-tabs {
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.tabs-scroll {
  white-space: nowrap;
}

.tabs-container {
  display: flex;
  padding: 0 32rpx;
}

.tab-item {
  position: relative;
  padding: 24rpx 32rpx;
  margin-right: 16rpx;
  cursor: pointer;
  
  &.active {
    .tab-text {
      color: $uni-color-primary;
      font-weight: 600;
    }
    
    .tab-indicator {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40rpx;
      height: 4rpx;
      background: $uni-color-primary;
      border-radius: 2rpx;
    }
  }
}

.tab-text {
  font-size: 28rpx;
  color: $uni-text-color-grey;
  transition: color 0.2s;
}

.posts-container {
  flex: 1;
  height: 0;
}

.posts-list {
  padding: 24rpx 32rpx;
}

.post-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  
  &:active {
    transform: translateY(-2rpx);
    box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12);
  }
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.user-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 28rpx;
  font-weight: 600;
  color: $uni-text-color;
}

.post-time {
  font-size: 24rpx;
  color: $uni-text-color-grey;
  margin-top: 4rpx;
}

.post-category {
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
  color: #fff;
  
  &.category-experience { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
  &.category-tech { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
  &.category-job { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
  &.category-study { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
  &.category-career { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
  &.category-skills { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #333; }
  &.category-default { background: #999; }
}

.post-content {
  margin-bottom: 24rpx;
}

.post-title {
  font-size: 32rpx;
  font-weight: 600;
  color: $uni-text-color;
  line-height: 1.4;
  margin-bottom: 16rpx;
  display: block;
}

.post-summary {
  font-size: 28rpx;
  color: $uni-text-color-grey;
  line-height: 1.5;
  display: block;
  margin-bottom: 20rpx;
}

.post-images {
  display: flex;
  gap: 12rpx;
  position: relative;
}

.post-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  object-fit: cover;
}

.image-count {
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 8rpx 12rpx;
  border-radius: 8rpx;
  font-size: 22rpx;
}

.post-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 24rpx;
  border-top: 1rpx solid #f0f0f0;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  cursor: pointer;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  transition: background 0.2s;
  
  &:active {
    background: $uni-bg-color-hover;
  }
}

.stat-text {
  font-size: 24rpx;
  color: $uni-text-color-grey;
  
  &.liked {
    color: #ff4757;
  }
}

.loading-more {
  padding: 40rpx 0;
  text-align: center;
}

.fab-container {
  position: fixed;
  right: 32rpx;
  bottom: 120rpx;
  z-index: 100;
}

.fab-button {
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(135deg, $uni-color-primary 0%, #0056b3 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(0,122,255,0.3);
  transition: transform 0.2s;
  
  &:active {
    transform: scale(0.95);
  }
}

.publish-modal {
  padding: 48rpx 0 0 0;
  border-radius: 32rpx 32rpx 0 0;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.08);
}

.modal-header {
  padding: 0 48rpx 32rpx 48rpx;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
}

.modal-content {
  flex: 1;
  padding: 0 48rpx 0 48rpx;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.category-picker {
  padding: 32rpx;
  background: #f7f8fa;
  border-radius: 20rpx;
  margin-bottom: 0;
}

.picker-label {
  font-size: 30rpx;
  color: #333;
}

.picker-value {
  font-size: 30rpx;
  color: #888;
}

.title-input {
  padding: 32rpx;
  font-size: 30rpx;
  border-radius: 20rpx;
  background: #f7f8fa;
  margin-bottom: 0;
}

.content-input {
  padding: 32rpx;
  font-size: 30rpx;
  border-radius: 20rpx;
  background: #f7f8fa;
  min-height: 240rpx;
  margin-bottom: 0;
}

.image-upload {
  margin-bottom: 0;
}

.upload-scroll-view {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}

.upload-list {
  display: flex;
  flex-direction: row;
  gap: 24rpx;
  align-items: center;
}

.upload-thumb {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  background: #f2f3f5;
  margin-right: 0;
}

.upload-image-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16rpx;
}

.remove-btn-thumb {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 36rpx;
  height: 36rpx;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.upload-btn-thumb {
  width: 160rpx;
  height: 160rpx;
  border-radius: 20rpx;
  background: #f7f8fa;
  border: 2rpx dashed #d0d0d0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  cursor: pointer;
}

.upload-text-thumb {
  font-size: 24rpx;
  color: #bbb;
}

.modal-footer {
  padding: 40rpx 48rpx 48rpx 48rpx;
  border-top: none;
}

.publish-btn {
  height: 96rpx;
  border-radius: 24rpx;
  font-size: 34rpx;
  font-weight: bold;
  background: linear-gradient(90deg, #3478f6 0%, #5ea3ff 100%);
  box-shadow: 0 4rpx 16rpx rgba(52,120,246,0.10);
}

.tag-picker {
  margin-bottom: 0;
}

.tag-list {
  gap: 20rpx;
  margin-top: 16rpx;
}

.tag-item {
  padding: 12rpx 32rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
  background: #f2f3f5;
  color: #666;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}

.tag-item.selected {
  background: #3478f6;
  color: #fff;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 12rpx;
}

.post-tag {
  background: #e6f0ff;
  color: $uni-color-primary;
  font-size: 22rpx;
  border-radius: 12rpx;
  padding: 4rpx 14rpx;
}

.new-publish-modal {
  padding: 48rpx 0 0 0;
  border-radius: 32rpx 32rpx 0 0;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.08);
}

.new-modal-header {
  padding: 0 48rpx 32rpx 48rpx;
  border-bottom: none;
}

.new-modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
}

.new-modal-content {
  flex: 1;
  padding: 0 48rpx 0 48rpx;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.new-category-picker {
  padding: 32rpx;
  background: #f7f8fa;
  border-radius: 20rpx;
  margin-bottom: 0;
}

.new-picker-label {
  font-size: 30rpx;
  color: #333;
}

.new-picker-value {
  font-size: 30rpx;
  color: #888;
}

.new-tag-picker {
  margin-bottom: 0;
}

.new-tag-list {
  gap: 20rpx;
  margin-top: 16rpx;
}

.new-tag-item {
  padding: 12rpx 32rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
  background: #f2f3f5;
  color: #666;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}

.new-tag-item.selected {
  background: #3478f6;
  color: #fff;
}

.new-title-input {
  padding: 32rpx;
  font-size: 30rpx;
  border-radius: 20rpx;
  background: #f7f8fa;
  margin-bottom: 0;
}

.new-content-input {
  padding: 32rpx;
  font-size: 30rpx;
  border-radius: 20rpx;
  background: #f7f8fa;
  min-height: 240rpx;
  margin-bottom: 0;
}

.new-image-upload {
  margin-bottom: 0;
}

.upload-scroll-view {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}

.upload-list {
  display: flex;
  flex-direction: row;
  gap: 24rpx;
  align-items: center;
}

.upload-thumb {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  background: #f2f3f5;
  margin-right: 0;
}

.upload-image-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16rpx;
}

.remove-btn-thumb {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 36rpx;
  height: 36rpx;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.upload-btn-thumb {
  width: 160rpx;
  height: 160rpx;
  border-radius: 20rpx;
  background: #f7f8fa;
  border: 2rpx dashed #d0d0d0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  cursor: pointer;
}

.upload-text-thumb {
  font-size: 24rpx;
  color: #bbb;
}

.new-modal-footer {
  padding: 40rpx 48rpx 48rpx 48rpx;
  border-top: none;
}

.new-publish-btn {
  height: 96rpx;
  border-radius: 24rpx;
  font-size: 34rpx;
  font-weight: bold;
  background: linear-gradient(90deg, #3478f6 0%, #5ea3ff 100%);
  box-shadow: 0 4rpx 16rpx rgba(52,120,246,0.10);
}

// 只美化弹窗部分
.custom-publish-modal {
  padding: 56rpx 0 0 0;
  border-radius: 40rpx 40rpx 0 0;
  box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.10);
  background: #fff;
  min-height: 70vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.custom-modal-header {
  padding: 0 56rpx 36rpx 56rpx;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.custom-modal-title {
  font-size: 38rpx;
  font-weight: bold;
  color: #222;
}
.custom-modal-content {
  flex: 1;
  padding: 0 56rpx 0 56rpx;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}
.custom-category-picker {
  padding: 36rpx;
  background: #f7f8fa;
  border-radius: 24rpx;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.custom-picker-label {
  font-size: 32rpx;
  color: #333;
}
.custom-picker-value {
  font-size: 32rpx;
  color: #bbb;
}
.custom-tag-picker {
  margin-bottom: 0;
}
.custom-tag-list {
  gap: 24rpx;
  margin-top: 18rpx;
  display: flex;
  flex-wrap: wrap;
}
.custom-tag-item {
  padding: 14rpx 36rpx;
  border-radius: 22rpx;
  font-size: 28rpx;
  background: #f2f3f5;
  color: #666;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  margin-bottom: 8rpx;
}
.custom-tag-item.selected {
  background: #3478f6;
  color: #fff;
}
.custom-title-input {
  padding: 36rpx;
  font-size: 32rpx;
  border-radius: 24rpx;
  background: #f7f8fa;
  margin-bottom: 0;
}
.custom-content-input {
  padding: 36rpx;
  font-size: 32rpx;
  border-radius: 24rpx;
  background: #f7f8fa;
  min-height: 260rpx;
  margin-bottom: 0;
}
.custom-image-upload {
  margin-bottom: 0;
}
.custom-upload-scroll-view {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  padding-bottom: 4rpx;
}
.custom-upload-list {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
  align-items: center;
}
.custom-upload-thumb {
  position: relative;
  width: 190rpx;
  height: 190rpx;
  border-radius: 14rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  background: #f2f3f5;
  margin-right: 0;
}
.custom-upload-image-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14rpx;
}
.custom-remove-btn-thumb {
  position: absolute;
  top: 2rpx;
  right: 2rpx;
  width: 28rpx;
  height: 28rpx;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.custom-upload-btn-thumb {
  width: 220rpx;
  height: 220rpx;
  border-radius: 20rpx;
  background: #f7f8fa;
  border: 2rpx dashed #d0d0d0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  cursor: pointer;
}
.custom-upload-text-thumb {
  font-size: 22rpx;
  color: #bbb;
}
.custom-modal-footer {
  padding: 48rpx 56rpx 56rpx 56rpx;
  border-top: none;
}
.custom-publish-btn {
  height: 100rpx;
  border-radius: 28rpx;
  font-size: 36rpx;
  font-weight: bold;
  background: linear-gradient(90deg, #3478f6 0%, #5ea3ff 100%);
  box-shadow: 0 4rpx 16rpx rgba(52,120,246,0.10);
}
</style>